<template>
    <div class="container">

        <el-form ref="formRef" :model="form" :rules="rules" label-width="90px" style="padding-left: 10%;" size="large">
            <el-card shadow="never" :body-style="{ padding: '20px' }">
                <template #header>
                    <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                    <span>名片信息</span>
                </template>

                <div class="content">
                    <el-form-item label="员工姓名:" prop="employeeName">
                        <el-input v-model="form.employeeName" class="card-info-item" placeholder="请输入员工姓名"
                            maxlength="20" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="员工职位:" prop="employeePost">
                        <el-input v-model="form.employeePost" class="card-info-item" placeholder="请输入员工职位"></el-input>
                    </el-form-item>
                    <el-form-item label="浏览量:">
                        <el-input v-model.number="form.views" class="card-info-item" placeholder="请输入浏览量"></el-input>
                    </el-form-item>
                    <el-row :gutter="20" style="width: 1000px;">
                        <el-col :span="8" :offset="0">
                            <el-form-item label="手机号:" prop="mobile">
                                <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            <el-form-item label="邮箱:">
                                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            <el-form-item label="微信:">
                                <el-input v-model="form.weChat" placeholder="请输入微信"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <el-card class="card" shadow="never" :body-style="{ padding: '20px' }">
                <template #header>
                    <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                    <span>图片信息</span>
                </template>

                <div class="content-img">
                    <el-form-item class="card-img" prop="avatar">
                        <el-input v-show="false" v-model="form.avatar"></el-input>
                        <el-upload class="avatar-uploader el-upload" :headers="headers" accept="image/*"
                            :on-success="(res, file) => handleUploadSuccess(res, file, 'avatar')"
                            :show-file-list="false" :action="uploadUrl">
                            <el-image v-if="form.avatar" class="avatar" :src="form.avatar" lazy>
                                <template #error>
                                    <div class="image-slot">
                                        <img class="avatar" src="@/assets/goods/order/img_failure.svg" alt="">
                                    </div>
                                </template>
                            </el-image>
                            <div v-else class="upload-text">
                                <div>点击上传员工头像</div>
                                <div>750*750</div>
                            </div>
                            <div class="btn" v-if="form.avatar">
                                <el-button type="primary" @click.stop="deleteImg('avatar')">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </el-button>
                            </div>
                        </el-upload>
                        <div class="form-item__label">员工头像</div>
                    </el-form-item>
                    <el-form-item class="card-img" prop="background">
                        <el-input v-show="false" v-model="form.background"></el-input>
                        <el-upload class="avatar-uploader el-upload" :headers="headers" accept="image/*"
                            :on-success="(res, file) => handleUploadSuccess(res, file, 'background')"
                            :show-file-list="false" :action="uploadUrl">
                            <el-image v-if="form.background" class="avatar" :src="form.background" lazy>
                                <template #error>
                                    <div class="image-slot">
                                        <img class="avatar" src="@/assets/goods/order/img_failure.svg" alt="">
                                    </div>
                                </template>
                            </el-image>
                            <div v-else class="upload-text">点击上传背景</div>
                            <div class="btn" v-if="form.background">
                                <el-button type="primary" @click.stop="deleteImg('background')">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                </el-button>
                            </div>
                        </el-upload>

                        <div class="form-item__label">背景</div>
                    </el-form-item>
                </div>
            </el-card>

            <el-card class="card" shadow="never" :body-style="{ padding: '20px' }">
                <template #header>
                    <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="">
                    <span>个人简介</span>
                </template>

                <div class="content">
                    <el-form-item>
                        <el-input type="textarea" :rows="6" v-model="form.personalProfile" placeholder="请输入个人简介"
                            maxlength="100" show-word-limit></el-input>
                    </el-form-item>
                </div>
            </el-card>

        </el-form>
        <el-button style="margin: 20px auto;display: block;padding: 0 80px;" type="primary" size="large"
            @click="submit">保存</el-button>

    </div>
</template>

<script setup name="UserCardSetting" lang="ts">
import { globalHeaders } from '@/utils/request';
import { getUserCardInfo, updateUserCardInfo } from '@/api/system/user';
import { ref } from 'vue';
import { validateMobile, validateEmail } from '@/utils/validate'
const headers = globalHeaders();
const route = useRoute();
const formRef: any = ref();
console.log('formRef :>> ', formRef);
const form = ref({
    employeeName: '',
    employeePost: '',
    views: 0,
    mobile: '',
    email: '',
    weChat: '',
    avatar: '',
    background: '',
    personalProfile: ''
})
const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload' // 上传的图片服务器地址
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const rules = {
    employeeName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
    employeePost: [{ required: true, message: '请输入员工职位', trigger: 'blur' }],
    views: [{ required: true, message: '请输入浏览量', trigger: 'blur' }],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { validator: validateMobile, trigger: 'blur' }

    ],
    email: [
        { validator: validateEmail, trigger: 'blur' }
    ],
    weChat: [{ required: true, message: '请输入微信', trigger: 'blur' }],
    avatar: [{ required: true, message: '请上传员工头像', trigger: 'blur' }],
    background: [{ required: true, message: '请上传背景', trigger: 'blur' }],
    personalProfile: [{ required: true, message: '请输入个人简介', trigger: 'blur' }]
}
// 上传成功
const handleUploadSuccess = (res, file, key) => {

    // 如果上传成功
    if (res.code == 200) {
        form.value[key] = res.data.url;
    } else {
        proxy?.$modal.msgError(res.msg);
    }
}
// 删除图片
const deleteImg = (key) => {
    form.value[key] = '';
}
const submit = () => {
    formRef.value.validate((valid) => {
        console.log('valid :>> ', valid);
        if (valid) {
            const params = {
                ...form.value,
                userId: route.query.userId
            }
            updateUserCardInfo(params).then(res => {
                if (res.code == 200) {
                    proxy?.$modal.msgSuccess('保存成功');
                } else {
                    proxy?.$modal.msgError(res.msg);
                }
            })
        } else {
            return false;
        }
    });
}
onMounted(() => {

    getUserCardInfo(route.query.id).then(res => {
        form.value = res.data || {};
    })
})
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
}

.mark {
    width: 18px;
    margin-right: 10px;
}

.avatar-uploader,
.el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px !important;
    height: 120px;
    // display: inline-block;
    margin-right: 10px;
}

.avatar-uploader:hover,
.el-upload:hover {
    border-color: #409eff;
}

.imgs {
    display: inline-block;
}

.avatar-uploader__img {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 120px !important;
    height: 120px;
    display: inline-block;
    margin-right: 10px;

    img {
        width: 120px !important;
        height: 120px;
        object-fit: fill;
    }
}

.btn {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 120px !important;
    height: 120px;
    border-radius: 0 6px 0 6px;
    text-align: center;
    line-height: 120px;
}

.avatar-uploader:hover {

    // 鼠标悬浮显示按钮
    .btn {
        display: block;
    }

}

.upload-text {
    font-size: 14px;
    color: #8c939d;
    line-height: 20px;
    text-align: center;
    margin: 0 auto;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.card-info-item {
    width: 450px;
}

.content-img {
    display: flex;
    padding-top: 40px;
    // justify-content: space-between;
}

.card {
    margin-top: 20px;
}

.form-item__label::before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}
</style>
<style type="text/css">
.card-img .el-form-item__content {
    display: block;
    text-align: center;
}
</style>